{% extends "base.html" %}

{% block content %}

    <div id="bd">
        <div id="yui-main">
            <div class="yui-b">

                {% for video_dict in video_dicts %}

                    <div class="yui-gf">
                        <div class="question-wrapper">
                            <div class="yui-u first">
                                <h2>Question:</h2>
                            </div>
                            <div class="yui-u">
                                <p class="enlarge">
                                    &ldquo;{{ video_dict.question }}&rdquo;
                                </p>
                            </div>
                        </div>

                        <div class="answer-wrapper">
                            <div class="yui-u first answer">
                                <h2>Answer:</h2>
                            </div>
                            <div class="yui-u">
                                <iframe width="500" height="405" src="http://www.youtube.com/embed/{{ video_dict.id }}?rel=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div><!--// .yui-gf -->

                {% endfor %}

            </div><!--// .yui-b -->
        </div><!--// yui-main -->
    </div><!--// bd -->

{% endblock %}
